<template>
  <div class="i-box" hint="月供表">
    <table class="i-table">
      <tr class="gi-table-row ">
        <th class="gi-th1">月份</th>
        <th class="gi-th1">月总额</th>
        <th class="gi-th1">月本金</th>
        <th class="gi-th1">月利息</th>
        <th class="gi-th1">剩余</th>
      </tr>
      <div v-for="item in monthDatas">
        <tr class="gi-table-row bg-normal-1" >
          <td class="gi-td">{{item.month}}月</td>
          <td class="gi-td">¥{{item.total.toFixed(0)}}
          </td>
          <td class="gi-td">¥{{item.base.toFixed(0)}}
          <td class="gi-td">¥{{item.add.toFixed(0)}}
          <td class="gi-td">¥{{item.rest.toFixed(0)}}
          </td>
        </tr>
        <div class="gi-divider-gray"></div>
      </div>

    </table>
  </div>
</template>

<script>
  export default {
    name: "MonthTable",
    props: {
      monthDatas: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        total: 0,//总金额
      }
    },
    methods: {
      back() {

      }
    },
    components: {},
    created() {

    },
  }
</script>

<style scoped>
  .i-box {
  }

  .i-table {
    width: 100%;
  }
  th{
    font-size: 1.2rem;
  }
</style>
